<%@page import="util.Utilities"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link type="text/css" href="jquery/css/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery/js/ui.core.js"></script>
<script type="text/javascript" src="jquery/js/ui.datepicker.js"></script>

<script type="text/javascript">
var day1 = ${requestScope.map.room.price1 };
var day7 = ${requestScope.map.room.price7 };
var day30 = ${requestScope.map.room.price30 };
var guests = ${requestScope.map.room.accommodates};
var checkInTime = ${requestScope.map.room.checkInTime};
var Sday;
////현재시간////
var day=new Date(); 
var y=day.getYear(); //2012
if(y<2000)y=y+1900; 
var mon=day.getMonth(); //7
var date=day.getDate(); 
var today;
if(mon < 10){
	if(date < 10){
		today = y+'-0'+(mon+1)+'-0'+date;
	}else{
		today = y+'-'+(mon+1)+'-'+date;
	}
}else{
	if(date < 10){
		today = y+'-0'+(mon+1)+'-0'+date;
	}else{
		today = y+'-'+(mon+1)+'-'+date;
	}
}
/////////////방 값///////////////
$(document).ready(function(){
	$("#day").bind("change", function(){
		Sday =  $(this).val();
		if(Sday=="day1"){
			$("#price").html('$'+day1);
		}else if(Sday=="day7"){
			$("#price").html('$'+day7);
		}else if(Sday=="day30"){
			$("#price").html('$'+day30);
		}
	});
	$("#price").css("font-size", "50px").css("font-weight", "700");  
	$("#total").css("font-size", "50px").css("font-weight", "700");  
	
	$("#enddate").bind("change", function(){
		if($("#startdate").val() == ""){
			alert("시작일 먼저 선택하세요");
			$("#enddate").val("");
		}else if($("#startdate").val() != ""){
			var total = getTotal();	
			$("#total").html('$'+total);	
			$("input[name=rqtotal]").val(total);
			$("input[name=rqcheckInTime]").val(checkInTime);
		    $("input[name=day1]").val(day1);
		}
	});
});
////////////////////기간 계산//////////////
function getTotal(){
	var sdate = document.getElementById("startdate").value;
	var edate = document.getElementById("enddate").value;
	sd = sdate.split("-");
    ed = edate.split("-");
    var st = new Date(sd[0],sd[1]-1,sd[2]);
    var et = new Date(ed[0],ed[1]-1,ed[2]);
    var day = 1000*60*60*24;
    var count = Math.abs((et-st)/day);//기간
    $("input[name=day]").val(count);
    var total;//총 가격
    if(count/30 >= 1){//30일 이상인 경우
    	var p30 = ((count-(count%30))/30) * day30;
    	if(count%30 == 0){
    		p7 = 0;
    		p1 = 0;
    	}else if(count%30 >= 7){
    		var nday = count%30;
    	    var p7 = ((nday-(nday%7))/7) * day7;
    	    var p1 = nday%7 * day1;
    	}else{
    		p1 = count%30 * day1;
    		p7 = 0;
    	}
    }else if(count/7 >= 1){//7일 이상
    	p30 = 0;
    	if(count%7 == 0){
    		p7 = ((count-(count%7))/7) * day7;
    		p1 = 0;
    	}else{
    		p7 = ((count-(count%7))/7) * day7;
    		p1 = count%7 * day1;
    	}
    }else{ //7일 이하
    	p30 = 0;
    	p7 = 0;
    	p1 = count * day1;
    }
    total = p30+p7+p1;
    return total;
} 

//////////////////인원체크///null값 체크///////////////
function chk(){
	var text = document.form1;
	if(${sessionScope.login_info == null}){
		 alert("로그인 먼저 해주세요.");
		 return false;
	 }else if(text.startdate.value == ""){
		alert("체크인을 선택해주세요");
		text.startdate.focus();
		return false;
	}else if(text.enddate.value == ""){
		alert("체크인을 선택해주세요");
		text.enddate.focus();
		return false;
	}
	var Sguests = document.getElementById("guests").value;
	if(Sguests <= guests){
		return true;
	}else{
		alert("최대 게스트 수는"+guests+"입니다.");
		return false;
	}
}

/////////////////////달력//////////////////////
$(function() {
	$.datepicker.setDefaults({
	    monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
	    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
	    showMonthAfterYear:true,
	    dateFormat: 'yy-mm-dd',
	    nextText: '다음달', 
	    prevText: '이전달',
	    firstDay:0,
	    isRTL:false,
	    showOn: 'both',
	    constrainInput: true,
		buttonImage: 'jquery/ic_03.gif',
	    buttonImageOnly: true
	});
	$("#startdate").datepicker({
		minDate:new Date(today),
	    buttonText: '시작일'
	    
	});
	$("#enddate").datepicker({
	//	constrainInput: true,
		minDate:new Date(today),
	    buttonText: '종료일'
	});
});

function commonWork() {
	var stdt = document.getElementById("startdate");
	var endt = document.getElementById("enddate");

	if(endt.value != "" && stdt.value > endt.value) {
		alert("종료일이 시작일보다 빠릅니다.\n\n다시 입력해 주십시오.");
		stdt.value = "";
		endt.value = "";
		stdt.focus();
	}
}
</script>
<style type="text/css">
	.ui-datepicker-trigger {
		padding-left: .3em;
		vertical-align: middle;
		cursor: pointer;
	}
</style>
<form id="form1" name="form1" action="/${initParam.context_root }/goRegisterjsp.do" method="post" onsubmit="return chk();">
<input type="hidden" name="roomNo" value="${requestScope.map.room_no}">
<input type="hidden" name="memberId" value="${sessionScope.dto.member_id}">
<input type="hidden" name="rqtotal">
<input type="hidden" name="day">
<input type="hidden" name="day1">
<input type="hidden" name="rqcheckInTime">
<!-- <table width="350" height="100" bgcolor="ffff99"> -->
<table width="350" height="100" bgcolor="66cccc">
	<tr>
		<td>
			<div id="price"><font size="9" ><b>$${requestScope.map.room.price1 }</b></font></div>
		</td>
		<td colspan="2" align="right">
			<select name="day" id="day" style="width:90px;height:23px;font-size:14px">
				<option value="day1">Per Night</option>
				<option value="day7">Per Week</option>
				<option value="day30">Per Month</option>
			</select>
		</td>
	</tr>
	<tr>
		<td>Check in</td>
		<td>Check out</td>
		<td>Guests</td>
	</tr>
	<tr>
		<td><input type="text" id="startdate" name="startdate" size="12" onchange="commonWork()" readonly="readonly"/></td>
		<td><input type="text" id="enddate" name="enddate" size="12" onchange="commonWork()" readonly="readonly"/></td>
		<td><select id="guests" name="guests" style="width:50px;">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16+</option>
				</select></td>
	</tr>
	<tr>
		<td colspan="3" ><font size="5">total</font></td>
	</tr>
	<tr>
		<td><div id="total"></div></td>
	</tr>
	<!-- <tr>
		<td colspan="3" align="center"><img src="img/reservation_button.JPG" onclick="getGuests()"></td>
	</tr> --> 
</table>
<input type="submit" value="reservation">
</form>

    
<c:forEach items="${requestScope.map }" var="entry">
	<c:if test="${entry.key=='member' }">
	<img src="/${initParam.context_root }/member_picture/${entry.value.picture_filename}" width="100" ><br>
	Id : ${entry.value.member_id }<br>
	Name : ${entry.value.last_name }${entry.value.first_name}<br>
	BirthDay : ${entry.value.birthday }<br>
	PhoneNumber: ${entry.value.phone_no }<br>
	Address : ${entry.value.address }<br>
	<c:choose>
	<c:when test="${entry.value.member_gender == 'm'}">
	Gender : Male<br>	
	</c:when>
	<c:otherwise>
	Gender : Female<br>
	</c:otherwise>
	</c:choose>	
	</c:if>
</c:forEach>
	<a href="/${initParam.context_root }/goMessageInput.do?room_no=${requestScope.map.room_no}">
		<img src="/${initParam.context_root }/img/message.png" align="bottom" width="30" height="20" style="border: 0;">
		Inquire
	</a><br>
	
<jsp:include page="/jsp/map.jsp"/>